<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="lzy">
    <title>lzy-</title>
    <style>
        #chooseImg img{
            width: 100px;
            height: 100px;
        }
        #chooseImg input{
            display: none;
        }
    </style>
</head>
<body>
    <form action="#">
        <div id="chooseImg">
            <img src="img/add.png" alt="">
            <input type="file">
            <img src="img/add.png" alt="">
            <input type="file">
            <img src="img/add.png" alt="">
            <input type="file">
        </div>
        <div id="upload">
            <button type="button">添加</button>
            <button type="submit">上传</button>
        </div>
    </form>
</body>
</html>
<script>
    var btn = document.querySelector('#upload button[type=button]'); 
    var chooseImg = document.querySelector('#chooseImg');
    // 通过点击添加按钮,添加一张占位的img和一个input
    btn.onclick = function(){
        var img =document.createElement('img');
        img.src='img/add.png';
        chooseImg.appendChild(img);
        var input =document.createElement('input');
        input.type='file';
        chooseImg.appendChild(input);
        clickFile(); 
    }
    clickFile();    
    function clickFile(){
    var aImg = document.querySelectorAll('img');
    for(var i=0;i<aImg.length;i++){
        // 点击图片实现选择文件的功能
        aImg[i].onclick = function(){
            // input.click()
            this.nextElementSibling.click();
            }
        }
    var aInput =document.querySelectorAll('#chooseImg input[type=file]');
    for(var i=0;i<aInput.length;i++){
        aInput[i].onchange=function(){
            // input标签有一个files属性,里面包含了所上传的文件的信息
            // input.files里面有一个file属性,这个file就是我们所上传的文件的具体信息
            // 如果上传的是图片,file.type的值为image/png或者image/jpeg
            console.dir(this.files);
            var file=this.files[0];
            // 判断文件是否是图片
            // startsWith() 判断某个字符串是否以某个字符开头,返回true或者false
            if(file.type.startsWith('image')){
                // 是图片
                // URL.createObjectURL(file) 根据传入的参数创建一个指向该文件的URL
                this.previousElementSibling.src=URL.createObjectURL(file);
            }
            else{
                // 不是图片
                alert('只能上传图片');
            }
            }
        }

    }


   
</script>